body {
    background-color: #f5f5f5;
    .container {
        background-color: #fff;
    }
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

a {
    color: #333;
}
/* 因为设计稿宽度是1280的，所以将网站的最大宽度设计为1280px */
@media screen and (min-width: 1280px) {
    .container {
        width: 1280px;
    }
}
// 当处于小屏幕或者超小屏幕下，让导航栏模块浮动起来
@media screen and (max-width: 991px) {
    .h_nav ul li {
        float: left;
        width: 20%;
    }
    article {
        margin-top: 10px;
    }
}
//当处于超小屏幕下字体大小也改小
@media screen and (max-width: 767px) {
    .h_nav_a {
        font-size: 12px!important;
    }
    //当处于超小屏幕下，news里面第一个盒子占比100%，其他50%
    .news {
        ul {
            li {
                width: 50%!important;
                &:nth-child(1) {
                    width: 100%!important;
                }
            }
        }
    }
    .pub h3 {
        font-size: 14px;
    }
}
//左侧logo和导航栏
.header {
    padding-left: 0;

    .logo {
        display: block;
        width: 100%;
        background-color: #429ad9;
        text-align: center;
        img {
            //width: 100%;
            max-width: 100%;
            margin: 0 auto;
         }
         div {
             width: 100%;
             height: 50px;
             line-height: 50px;
             color: #fff;
             text-align: center;
             font-size: 18px;
         }
    }

    .h_nav {
        ul {
            background-color: #eee;

            .h_nav_a {
                padding: 15px 15px;
                color: #666;
                font-size: 16px;

                &:hover {
                    background-color: #fff;
                    color: #333;
                }

                span {
                    padding-right: 5px;
                }
            }
        }
    }
}

// 中间模块
.news {
    ul {
        li {
            float: left;
            width: 25%;
            height: 128px;
            margin-bottom: 10px;
            padding-right: 10px;

            a {
                position: relative;
                display: block;
                width: 100%;
                height: 100%;

                p {
                    position: absolute;
                    bottom: -10px;
                    left: 0;
                    width: 100%;
                    padding: 8px;
                    background-color: #333;
                    opacity: .7;
                    color: #fff;
                    font-size: 12px;
                }

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            &:nth-child(1) {
                width: 50%;
                height: 266px;
                a {
                    p {
                        font-size: 14px;
                    }
                }
            }

        }
    }
}

.publish {
    .pub {
        padding: 10px 0;
        border-bottom: 2px solid #ccc;
        &:nth-child(1) {
            border-top: 2px solid #ccc;
        }
        .pic {
            width: 100%;
            img {
                width: 100%;
            }
        }
    }
    }

//右边侧边栏模块
.banner {
    width: 100%;
    img {
        width: 100%;
    }
}

.hot {
    display: block;
    border: 1px solid #ccc;
    margin-top: 20px;
    padding: 0 20px 20px;
    span {
        background-color: #337ab7;
        color: #fff;
        margin-bottom: 20px;
        border-radius: 0;
    }
    p {
        font-size: 12px;
    }
}